<!DOCTYPE html>
<!-- 
  文件名：login.html
  描述：用户登录页面
  功能：
  1. 提供账号密码登录表单
  2. 提供微信扫码登录选项
  3. 包含忘记密码和注册账号的快捷链接
-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link href="../../../css/output.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
    <div class="flex-1 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-xl w-full max-w-4xl p-8">
            <div class="flex flex-col md:flex-row gap-8">
                <!-- 登录表单部分 -->
                <div class="flex-1 space-y-6">
                    <h2 class="text-3xl font-bold text-gray-800 text-center mb-8">用户登录</h2>
                    <form id="login-form" class="space-y-6">
                        <div class="space-y-2">
                            <label for="zhanghao" class="block text-sm font-medium text-gray-700">账号</label>
                            <input type="text" id="zhanghao" name="account" 
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                   placeholder="请输入用户名或邮箱" required>
                        </div>
                        <div class="space-y-2">
                            <label for="mima" class="block text-sm font-medium text-gray-700">密码</label>
                            <div class="relative">
                                <input type="password" id="mima" name="psw" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                       placeholder="请输入密码" required
                                       autocomplete="current-password"
                                       data-lpignore="true">
                            </div>
                        </div>
                        <button type="submit" id="btn-denglu" 
                                class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">
                            登录
                        </button>
                        <div class="flex justify-center space-x-4 text-sm text-gray-600">
                            <a href="../../ForgotPassword/html/forgot-password.html" class="hover:text-blue-600 transition-colors">忘记密码</a>
                            <span class="text-gray-300">|</span>
                            <a href="../../Register/html/register.html" class="hover:text-blue-600 transition-colors">注册账号</a>
                        </div>
                    </form>
                </div>
                
                <!-- 二维码登录部分 -->
                <div class="flex-1 flex items-center justify-center border-l border-gray-200 pl-8">
                    <div class="text-center">
                        <img src="../img/002.png" alt="二维码登录" class="mx-auto w-48 h-48 rounded-lg shadow-md">
                        <p class="mt-4 text-gray-600">微信扫一扫登录</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部信息栏 -->
    <footer class="bg-white py-6 text-center text-sm text-gray-600">
        <p class="mb-2">&copy; 2024 Group4. 版权所有.</p>
        <div class="space-x-4">
            <a href="#" class="hover:text-blue-600 transition-colors">隐私政策</a>
            <span class="text-gray-300">|</span>
            <a href="#" class="hover:text-blue-600 transition-colors">使用条款</a>
            <span class="text-gray-300">|</span>
            <a href="#" class="hover:text-blue-600 transition-colors">联系我们</a>
        </div>
    </footer>

    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../../../js/api.js" type="module"></script>
    <script src="../js/login.js" type="module"></script>
</body>
</html>
